<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<title>XXXXX滑雪数据大屏</title>
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/fuc.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="warp">
		<div class="head">
			<div class="head_l">
				<div class="item">
					<span>北大海景区</span>
				</div>
				<div class="item">
					<img src="img/sun.png" alt="">
					<span>晴 11℃</span>
				</div>
			</div>
			<div class="head_r">
				<div class="item time"></div>
				
			</div>
			<div class="title">XXXXX滑雪数据大屏</div>
		</div>
		<div class="main clearfix">
			<div class="main_l">
				<div class="box1">
					<img src="img/icon1.png" class="icon1" alt="">
					<img src="img/icon2.png" class="icon2" alt="">
					<img src="img/icon3.png" class="icon3" alt="">
					<img src="img/line.png" class="line" alt="">
				</div>
				<div class="box2">
					<div class="title">启动图</div>
					<div class="con">
						<ul class="scroll">
							<li class="clearfix">
								<span class="name">索道xxx</span>
								<div class="process">
									<div class="bar" style="width: 100%;"></div>
								</div>
								<span class="num">100%</span>
							</li>
							<li class="clearfix">
								<span class="name">索道xxx</span>
								<div class="process">
									<div class="bar" style="width: 100%;"></div>
								</div>
								<span class="num">100%</span>
							</li>
							<li class="clearfix">
								<span class="name">索道xxx</span>
								<div class="process">
									<div class="bar" style="width: 100%;"></div>
								</div>
								<span class="num">100%</span>
							</li>
							<li class="clearfix">
								<span class="name">索道xxx</span>
								<div class="process">
									<div class="bar" style="width: 100%;"></div>
								</div>
								<span class="num">100%</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="main_r">
				<div class="box1 clearfix">
					<div class="item item1">
						<p class="p1">访问人数</p>
						<p class="p2">36人</p>
					</div>
					<div class="item item2">
						<p class="p1">上线商家</p>
						<p class="p2">6家</p>
					</div>
				</div>
				<div class="box2">
					<div class="title">运行情况</div>
					<div class="con clearfix">
						<div class="item item1 mr22">
							<p class="p1">21</p>
							<p class="p2">索道开放数量</p>
						</div>
						<div class="item item1 mr22">
							<p class="p1">34</p>
							<p class="p2">雪道开发数量</p>
						</div>
						<div class="item item1">
							<p class="p1">103KM</p>
							<p class="p2">雪道总长</p>
						</div>
						<div class="item item2 mr25">
							<p class="p1">420</p>
							<p class="p2">停车场开放数量</p>
						</div>
						<div class="item item2">
							<p class="p1">520</p>
							<p class="p2">酒店开放数量</p>
						</div>
					</div>
				</div>
				<div class="box3">
					<video src="img/vedio.mp4" id="video" width="600" height="400" controls autoplay></video>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	(function(){
		// 分辨率缩放
		function setRem() {
			let vW = window.innerWidth / 1920;
			let vH = window.innerHeight / 1080;
			document.getElementById('warp').style.transform = "scale(" + vW + "," + vH + ")"
		}
		setRem();
		window.onresize = function () {
			setRem()
		};
		// 时间定时器
		$('.time').html(YU.formatDate('yyyy-MM-dd hh:mm:ss'))
		setInterval(() => {
			$('.time').html(YU.formatDate('yyyy-MM-dd hh:mm:ss'))
		}, 1000)
		var timer= setInterval(function() {
			YU.topScroll(".scroll",2000);
		},3000);
	})()
	function show1(){
		$('.icon1').addClass('active')		
		setTimeout(()=>{
			$('.icon1').removeClass('active')
			show2()
		},3000)
	}
	function show2(){		
		$('.icon1').addClass('active')
		$('.icon2').addClass('active')
		setTimeout(()=>{
			$('.icon1').removeClass('active')
			$('.icon2').removeClass('active')
			show3()
		},3000)
	}
	function show3(){
		$('.icon1').addClass('active')
		$('.icon2').addClass('active')
		$('.icon3').addClass('active')		
		setTimeout(()=>{
			$('.icon1').removeClass('active')
			$('.icon2').removeClass('active')
			$('.icon3').removeClass('active')			
		},3000)
		setTimeout(()=>{
			show1()
		},4000)
	}
	show1()
</script>

</html>